<template>
  <div class="recipe-carousel">
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="1" animated />
    </div>
    <div v-else-if="!recipes || recipes.length === 0" class="empty-container">
      <el-empty :description="emptyText" />
    </div>
    <el-carousel v-else :interval="5000" type="card" :height="carouselHeight">
      <el-carousel-item
        v-for="recipe in recipes"
        :key="recipe.id"
        class="carousel-item"
      >
        <div class="recipe-card" @click="handleRecipeClick(recipe)">
          <div class="card-image">
            <img
              :src="recipe.imageUrl || defaultImage"
              :alt="recipe.title"
              @error="handleImageError"
            />
            <div class="rating-overlay" v-if="recipe.avgRating">
              <el-rate
                v-model="recipe.avgRating"
                disabled
                text-color="#ff9900"
                :colors="['#ff9900', '#ff9900', '#ff9900']"
                :score-template="recipe.avgRating.toFixed(1)"
              />
            </div>
          </div>
          <div class="card-content">
            <h3 class="recipe-title">{{ recipe.title }}</h3>
            <div class="recipe-info">
              <span class="author">{{ recipe.author }}</span>
              <span class="cuisine">{{ recipe.cuisineType }}</span>
            </div>
            <div class="recipe-tags">
              <el-tag v-if="recipe.tasteType" size="small" type="info">{{
                recipe.tasteType
              }}</el-tag>
              <el-tag v-if="recipe.cookingTime" size="small" type="success">{{
                formatTime(recipe.cookingTime)
              }}</el-tag>
              <el-tag v-if="recipe.difficulty" size="small" type="warning">{{
                difficultyText(recipe.difficulty)
              }}</el-tag>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "RecipeCarousel",
  props: {
    recipes: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    emptyText: {
      type: String,
      default: "暂无推荐",
    },
  },
  data() {
    return {
      defaultImage:
        "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png",
    };
  },
  computed: {
    carouselHeight() {
      return "300px";
    },
  },
  methods: {
    handleImageError(e) {
      e.target.src = this.defaultImage;
    },
    handleRecipeClick(recipe) {
      this.$emit("recipe-click", recipe);
    },
    formatTime(minutes) {
      if (!minutes) return "未知时间";

      if (minutes < 60) {
        return `${minutes}分钟`;
      } else {
        const hours = Math.floor(minutes / 60);
        const mins = minutes % 60;
        return mins > 0 ? `${hours}小时${mins}分钟` : `${hours}小时`;
      }
    },
    difficultyText(level) {
      const mapping = {
        1: "简单",
        2: "中等",
        3: "困难",
        4: "大师级",
      };
      return mapping[level] || "未知难度";
    },
  },
};
</script>

<style scoped>
.recipe-carousel {
  padding: 10px 0;
}

.loading-container,
.empty-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-item {
  cursor: pointer;
}

.recipe-card {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.3s;
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-image {
  height: 65%;
  position: relative;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.recipe-card:hover .card-image img {
  transform: scale(1.05);
}

.rating-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  color: white;
}

.card-content {
  padding: 12px;
  height: 35%;
  display: flex;
  flex-direction: column;
}

.recipe-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
}

.author,
.cuisine {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48%;
}

.recipe-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

:deep(.el-carousel__item) {
  border-radius: 8px;
}

:deep(.el-carousel__item--card.is-active) {
  transform: scale(1.05);
  z-index: 2;
}
</style>
